<template>
    <div class="echart-chart">
        <div class="inside">
            <header>族裔比例</header>
            <div class="chartBox clearfix">
                <div class="chart-div" id="ethnic-chart" v-show="!chartNoDataShow"></div>
                <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
            </div>
            <p v-show="false">{{getCityIndexData}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                myEcharts: null,
                chartNoDataShow: false, //判断是否有无数据
            }
        },
        computed: {
            //从state获取城市指数数据
            getCityIndexData() {
                if(this.$store.getters.get_cityIndexData){
                    //获取族裔比例数据
                    if(Object.keys(this.$store.getters.get_cityIndexData).length != 0){
                        this.chartNoDataShow = false;
                        let data = this.$store.getters.get_cityIndexData;
                        //延时1s，否则会造成死循环，或者其他报错
                        this.$nextTick(() => {
                            this.ethnic_charts(data.totalBlackPeople, data.totalWhitePeople, data.totalAsianPeople, data.totalHispanicPeople, data.totalOtherPeople);
                        });
                    }else{
                        this.chartNoDataShow = true;
                    }
                }
                return this.$store.getters.get_cityIndexData
            },
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('ethnic-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });
        },
        methods: {
            //族裔比例——饼图
            ethnic_charts(Black, White, Asian, Hispanic, Other){
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        orient: 'horizontal',
                        left: 'center',
                        top: '20',
                        data: ['黑人', '白人', '亚裔', '西裔', '其他']
                    },
                    series: [{
                        name: '族裔比例',
                        type: 'pie',
                        radius: ['18%', '45%'], //圆的内外半径
                        center: ['50%', '60%'], //圆的X,Y轴平移
                        data: [
                            {
                                value: Black,
                                name: '黑人',
                            },
                            {
                                value: White,
                                name: '白人',
                            },
                            {
                                value: Asian,
                                name: '亚裔',
                            },
                            {
                                value: Hispanic,
                                name: '西裔',
                            },
                            {
                                value: Other,
                                name: '其他',
                            }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                formatter: '{b}：{d}%'
                            }
                        }
                    }],
                    color: ['#40c3f9', '#ffbf53', '#fe5960', '#00bc7b', '#f963a0'],
                });
            },
        },
        components: {
        }
    }
</script>

<style scoped lang="less" type="text/less">
    body {

    }
</style>
